<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background-color: rgb(247,246,242);
		}
		.all{
			margin: auto;
			width: 1317px;
		}
		.two_header{
			width: 1317px;
			height: 70px;
			background-color: black;
			margin: auto;
			background-repeat: no-repeat;
		}
		.header-logo>a{
			color: white;
			font-weight: bold;
			font-size: 30px;
			text-decoration: none;
			margin-left: 50px;
			margin-bottom: 25px;
		}
		.header-logo,.two_middle-logo1,.two_middle-logo2,a{
			display: inline-block;
			vertical-align: middle;
		}
		.two_middle-logo1>a{
			color: white;
			font-size: 20px;
			text-decoration: none;
			margin-left: 200px;
			margin-bottom: 20px;
			width: 122px;
			height: 70px;
			text-align: center;
			line-height: 60px;
			background-color: black;
		}
		.two_middle-logo2>a{
			color: white;
			font-size: 20px;
			text-decoration: none;
			margin-left: 100px;
			margin-bottom: 20px;
			width: 122px;
			height: 70px;
			text-align: center;
			line-height: 60px;
			background-color: black;
		}
		.two_middle-logo1>a:hover{
			border-top: 3px solid red;
			height: 63px;
			line-height: 57px;
		}
		
		.two_middle-logo2>a:hover{
		border-top: 3px solid red;
		height: 63px;
		line-height: 57px;
		}
		.two_middle-logo3>img{
			width: 990px;
			height: 60px;
			margin: auto;
			margin-top: -20px;
		}
		.two_middle-logo3{
			width: 990px;
			height: 60px;
			margin: auto;
		}
		li{
			list-style-type: none;

		}
		a{
			text-decoration: none;
		}
		.two_end2{
			width: 722px;
			height: 46px;
			background-color: rgb(247,246,242);
			margin-left: 200px;
			margin-top: -20px;
		}
		.two_end3{
			width: 900px;
			height: 220px;
			background-color: white;
			margin-left: 200px;
		}
		.two_end4{
			width: 722px;
			height: 46px;
			background-color: rgb(247,246,242);
			margin-left: 200px;
			margin-top: 50px;
			
		}
		.two_end5{
			width: 900px;
			background-color: white;
			margin-left: 200px;
		}
		.bookGuanLi{
			width: 140px;
			text-align: center;
		}
		.bookGuanLi a{
			color: black;
		}
		.bookGuanLi a:hover{
			color: red;
		}
		.two_end5>.bookGuanLi>a>img{
			width: 130px;
			height: 190px;
			margin-left: 12px;
			margin-top: 10px;
		}
		.two_end3>a>img{
			width: 130px;
			height: 190px;
			margin-left: 12px;
			margin-top: 10px;
		}
		.two_end4>div>h3{
			width: 150px;
			height: 52px;
			line-height: 50px;
			text-align: center;
			background-color: white;
		}
		.two_end2>div>h3{
			width: 150px;
			height: 52px;
			line-height: 50px;
			text-align: center;
			background-color: white;
		}
		.two_end2,.two_end3{
			display: inline-block;
			vertical-align: bottom;
		}
		.two_end6>div>h3{
			width: 150px;
			height: 52px;
			line-height: 50px;
			text-align: center;
			margin-bottom:50px; 
		}
		a{
			text-decoration:none;
		}
		.two_end61 a:hover{
			color: pink;
		}
		.two_end63 a{
			color: black;
		}
		.two_end63 a:hover{
			color: pink;
		}
		.geRen{
			border: 3px solid rgb(200, 200, 200);
			width: 522px;
			margin:auto;
		}
		.two_end6{
			width: 522px;
			font-size: 30px;
			border-bottom: 2px solid rgb(200, 200, 200);
		}
		.two_end7{
			width: 522px;
		}
		.two_end7 table{
			line-height: 50px;
		}
		.two_end7 table tr td {
			border: 3px solid rgb(200, 200, 200);
			border-radius: 5%;
		}
		.tdLeft{
			width: 100px;
			text-align: right;
			font-size: 25px;
		}
		.tdRight{
			width: 300px;
			text-align: center;
			font-size: 25px;
		}
		.tdRight a{
			color: red;
		}
		.tdRight a:hover{
			color: pink;
		}
		.two_end61,.two_end62,.two_end63,two_middle-logo3{
			display: inline-block;
		}
		.two_end4 h3 a{
			color:purple;
		}
		two_middle-logo3{
			color:black;
		}
		.bookGuanLi,.bookGuanLi{
			display: inline-block;
		}
		.userImg{
			width: 100px;
			height: 100px;
		}
		.userImg Img{
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
		.userThing,.userImg{
			display: inline-block;
		}
		.userAnNiu{
			border-top: 3px solid rgb(200, 200, 200);
			height: 50px;
			text-align: center;
		}
		.userAnNiu input{
			width: 80px;
			height: 25px;
			text-align: center;
			margin-top: 10px;
		}
		img{
				 border: 1px solid #ccc; /* 边框样式 */
				  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
				  transition: transform 1s; /* 平滑过渡效果 */
		}
		a:hover{
			 box-shadow: 12px 0px 8px rgba(0, 0, 0, 0.5);
		}
		img:hover{
			transform: rotateY(-20deg); /* 鼠标悬停时封面轻微倾斜 */
		}
	</style>
</head>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<body>

		<div class="two_header">
			<div class="header-logo">
        		<a href="#">个人中心</a>
    		</div>
    		<div class="two_middle-logo1">
        		<a href="UserCenterServlet" id = "mybook" onclick="two_password1()">我的书架</a>
    		</div>
    		<div class="two_middle-logo2">
        		<a href="#" id = "security" onclick="two_password()">安全中心</a>
    		</div>
    		<div class="two_middle-logo3">
        		<a href="index.jsp" id = "exit" onclick="two_password()">返回终点网主页</a>
    		</div>
		<div class="two_end2">
	    	<div>
	    		<h3>最近阅读的书本</h3>
	    	</div>
	    </div>
	    <div class="two_end3">
	    	<c:forEach items="${rl }" var="r">
	    		<a href="ShuServlet?novelId=${r.novelId }"><img src="image/${r.getNovelImgURL() }" alt=""></a>
	    	</c:forEach>
	    </div>
	    <div class="two_end4">
	    	<div>
	    		<h3>我的收藏<a href="#" onclick="deleteShow()" class="deleteShow">&nbsp;&nbsp;&nbsp;&nbsp;管理></a></h3>
	    	</div>
	    </div>
	    <div class="two_end5">
	    	<c:forEach items="${sessionScope.cl }" var="shouCang">
	    		<div class="bookGuanLi">
		    		<a href="ShuServlet?novelId=${shouCang.novelId }"><img src="image/${shouCang.getNovelImgURL() }" alt=""></a>
		    		<a href="deleteServlet?novelId=${shouCang.getNovelId() }&userId=${user.getUserId()}" class="delete" style="display:none">删除书籍</a>
		    	</div>
	    	</c:forEach>
	    </div>
	    <div class="geRen">
	    	<div class="two_end6" style="display:none">
		    	<div class="two_end61">
		    		<a href="">个人信息</a>
		    	</div>
		    </div>
		    <div class="two_end7" style="display:none">
		    	<div class="userImg">
		    		<img src="image/">
		    	</div>
		    	<div class="userThing">
		    		<form action="" class="tijiao">
			    		<table>
			    			<tr>
				    			<td class="tdLeft">用户id</td>
				    			<td class="tdRight"><span class="userId">${user.getUserId()}</span></td>
				    		</tr>
				    		<tr>
				    			<td class="tdLeft">用户昵称</td>
				    			<td class="tdRight"><span class="userName">${user.getUserNickName()}</span></td>
				    		</tr>
				    		<tr>
				    			<td class="tdLeft">用户密码</td>
				    			<td class="tdRight"><span class="userPass  ">${user.getUserPass()}</span></td>
				    		</tr>
				    		<tr>
				    			<td class="tdLeft">手机号码</td>
				    			<td class="tdRight"><span class="userPhoneNum">${user.getUserPhone()}</span></td>
				    		</tr>
			    		</table>
			    		<div class="userAnNiu">
		    			<input type="button" value="编辑" onclick="update()" class="bianji">  
		    			</div>
			    		</form>
		    	</div>
		    	
		    		
		    	
		  </div>
	    </div>
	</div>

</body>

<script>
	function two_password(){
		$(".two_end6").css("display","block");
		$(".two_end7").css("display","block");
		$(".two_end2").css("display","none");
		$(".two_end3").css("display","none");
		$(".two_end4").css("display","none");
		$(".two_end5").css("display","none");
	}
	function two_password1(){
		$(".two_end6").css("display","none");
		$(".two_end7").css("display","none");
		$(".two_end2").css("display","block");
		$(".two_end3").css("display","block");
		$(".two_end4").css("display","block");
		$(".two_end5").css("display","block");
	}
	function deleteShow(){
		$(".delete").css("display","block");
		$(".deleteShow").css("display","none");
	}
	function update(){
		var un = $(".userName").html();
		$(".userName").empty();
		$(".userName").append($("<input type='text' name='userName'> ").val(un));
		
		var up = $(".userPass").html();
		$(".userPass").empty();
		$(".userPass").append($("<input type='text' name='userPass'>").val(up));
		
		var upn = $(".userPhoneNum").html();
		$(".userPhoneNum").empty();
		$(".userPhoneNum").append($("<input type='text' name='userPhoneNum'>").val(upn));
		
		$(".bianji").attr({value:"确定",onclick:"queDing()"});
	}
	function queDing(){
		$(".bianji").attr("type","submit");
		$(".tijiao").attr("action","updateServlet");
	}
</script>
</html>